<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>Digitalis - Business and Portfolio HTML Template</title>
    
    <!-- Meta-Tags -->
    <meta name="description" content="" />
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <meta http-equiv="imagetoolbar" content="no" />
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
    
    <!-- Stylesheets: Screen, Projection -->
    <link href="stylesheets/layout.css" media="screen, projection" rel="stylesheet" type="text/css" />
    <link href="stylesheets/default/black.css" media="screen, projection" rel="stylesheet" type="text/css" />
    
    <!--[if IE 6]>
      <script src="javascripts/ie.pngfix.js" type="text/javascript"></script>
      <script>DD_belatedPNG.fix('li, #logo a, #main, #preview, .post-data span, blockquote, .lightbox-image, .dropcap-circle, .breadcrumbs span.info');</script>
      <style>li, #footer .nav li a, #sidebar .nav li a {zoom:1}</style>
    <![endif]-->
    <!--[if lt IE 9]>
      <style>#showcase .rounded-corners-top, #showcase .rounded-corners-bottom {display: none}</style>
    <![endif]-->

    <!-- jQuery -->
    <script src="javascripts/jquery.js" type="text/javascript"></script>
    
    <!-- Cufon -->
    <script src="javascripts/cufon.js" type="text/javascript"></script>
    <script src="javascripts/cufon.fonts.js" type="text/javascript"></script>
    
    <!-- Nivo Slider -->
    <link href="plugins/nivoslider/nivo-slider.css" media="screen, projection" rel="stylesheet" type="text/css" />
    <link href="plugins/nivoslider/style-pack/custom-nivo-slider.css" media="screen, projection" rel="stylesheet" type="text/css" />
    <script src="plugins/nivoslider/jquery.nivo.slider.pack.js" type="text/javascript"></script>
    
    <!-- Fancybox -->
    <!--
    <link href="plugins/fancybox/jquery.fancybox-1.3.1.css" media="screen, projection" rel="stylesheet" type="text/css" />
    <script src="plugins/fancybox/jquery.fancybox-1.3.1.pack.js" type="text/javascript"></script>
    -->
    
    <!-- prettyPhoto -->
    <link href="plugins/prettyPhoto/css/prettyPhoto.css" media="screen, projection" rel="stylesheet" type="text/css" />
    <script src="plugins/prettyPhoto/js/jquery.prettyPhoto.js" type="text/javascript"></script>
        
    <!-- Superfish -->
    <script src="javascripts/jquery.superfish.js" type="text/javascript"></script>
    
    <!-- Forms -->
    <script src="javascripts/jquery.validate.pack.js" type="text/javascript"></script>
    <script src="javascripts/jquery.form.js" type="text/javascript"></script>
    
    <!-- Custom JavaScript -->
    <script src="javascripts/custom.js" type="text/javascript"></script>
  </head>
  
  <body class="">
    <div id="body-wrapper">
    
      <div id="header">
        <div class="wrapper">
          <div id="logo">
            <h1><a href="index.html">YOUR COMPANY NAME</a></h1>
          </div>
          
          <ul class="nav">
            <li class="first"><a href="index.html">Home</a>
              <ul>
                <li><a href="index.html">Home 1</a></li>
                <li><a href="index2.html">Home 2</a></li>
                <li><a href="index3.html">Home 3</a></li>
              </ul>
            </li>
            <li><a href="page.html">About</a></li>
            <li><a href="styles.html">Styles</a>
              <ul>
                <li><a href="styles.html">HTML Styles</a></li>
                <li><a href="styles2.html">Basic Content Styles</a></li>
                <li><a href="styles3.html">Advanced Content Styles</a></li>
                <li><a href="#">Multilevel Dropdown</a>
                  <ul>
                    <li><a href="#">Just for Demonstration</a></li>
                    <li><a href="#">Multilevel Dropdown</a></li>
                    <li><a href="#">Demonstration</a></li>
                    <li><a href="#">Dropdown Demo</a></li>
                  </ul>
                </li>
                <li><a href="columns.html">Columns</a></li>
                <li><a href="columns2.html">Fullwidth Columns</a></li>
                <li><a href="magazine.html">Magazine Look</a></li>
                <li><a href="forms.html">Forms</a></li>
              </ul>
            </li>
            <li><a href="blog.html">Blog</a>
              <ul>
                <li><a href="blog.html">Blog</a></li>
                <li><a href="blog2.html">Blog - Fullwidth</a></li>
                <li><a href="blog3.html">Blog - Flash-Video</a></li>
                <li><a href="blog4.html">Blog - Slider</a></li>
              </ul>
            </li>
            <li><a href="post.html">Post</a></li>
            <li><a href="portfolio.html">Portfolio</a>
              <ul>
                <li><a href="portfolio.html">Portfolio - 3 Columns</a></li>
                <li><a href="portfolio3.html">Portfolio - 2 Columns</a></li>
                <li><a href="portfolio4.html">Portfolio - 1 Column</a></li>
                <li><a href="portfolio2.html">Portfolio - Additional Styles</a></li>
              </ul>
            </li>
            <li class="last"><a href="contact.html">Contact</a></li>
          </ul>
          <!-- END .nav --> 
        </div> 
        <!-- END .wrapper -->
      </div>
      <!-- END #header -->
      
      <div id="topbar">
        <strong class="wrapper">
          Put a cool and catchy slogan in here to make your newly purchased Template more interesting!
        </strong>
      </div>
  
      <div id="main">
        <div class="wrapper">
          <div id="content">
            
            <div class="entry">
              <h2>HTML Styles</h2>
              
              <p>
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. 
              </p>
              
              
              
              
              <h3>Image alignment and captions</h3>
              <div class="img-frame img-with-caption float-left">
                <img src="images/dummy/picture.jpg" alt="Dummy Image" width="235" height="135" />
                <p class="caption">Image-Frame with caption</p>
              </div>
              <p>
                Morbi interdum mollis sapien. Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus. Sed vel lacus. Mauris nibh felis, adipiscing varius, adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus. Nunc tellus ante, mattis eget, gravida vitae, ultricies ac, leo. Integer leo pede, ornare a, lacinia eu, vulputate vel, nisl.
                Morbi interdum mollis sapien. Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus. Sed vel lacus. Mauris nibh felis, adipiscing varius, adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus. Nunc tellus ante, mattis eget, gravida vitae, ultricies ac, leo. Integer leo pede, ornare a, lacinia eu, vulputate vel, nisl.
              </p>
              <div class="img-with-caption float-right">
                <img src="images/dummy/picture.jpg" alt="Dummy Image" width="235" height="135" />
                <p class="caption">Just a normal image with caption</p>
              </div>
              <p>
                Morbi interdum mollis sapien. Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus. Sed vel lacus. Mauris nibh felis, adipiscing varius, adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus. Nunc tellus ante, mattis eget, gravida vitae, ultricies ac, leo. Integer leo pede, ornare a, lacinia eu, vulputate vel, nisl.
                Morbi interdum mollis sapien. Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus. Sed vel lacus. Mauris nibh felis, adipiscing varius, adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus. Nunc tellus ante, mattis eget, gravida vitae, ultricies ac, leo. Integer leo pede, ornare a, lacinia eu, vulputate vel, nisl.
              </p>
              <div class="img-with-caption float-left">
                <img class="rounded" src="images/dummy/picture.jpg" alt="Dummy Image" width="235" height="135" />
                <p class="caption">Rounded image without frame</p>
              </div>
              <p>
                Morbi interdum mollis sapien. Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus. Sed vel lacus. Mauris nibh felis, adipiscing varius, adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus. Nunc tellus ante, mattis eget, gravida vitae, ultricies ac, leo. Integer leo pede, ornare a, lacinia eu, vulputate vel, nisl.
                Morbi interdum mollis sapien. Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus. Sed vel lacus. Mauris nibh felis, adipiscing varius, adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus. Nunc tellus ante, mattis eget, gravida vitae, ultricies ac, leo. Integer leo pede, ornare a, lacinia eu, vulputate vel, nisl.
              </p>
              <div class="img-frame float-right">
                <img src="images/dummy/picture.jpg" alt="Dummy Image" width="235" height="135" />
              </div>
              <p>
                Morbi interdum mollis sapien. Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus. Sed vel lacus. Mauris nibh felis, adipiscing varius, adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus. Nunc tellus ante, mattis eget, gravida vitae, ultricies ac, leo. Integer leo pede, ornare a, lacinia eu, vulputate vel, nisl.
                Morbi interdum mollis sapien. Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus. Sed vel lacus. Mauris nibh felis, adipiscing varius, adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus. Nunc tellus ante, mattis eget, gravida vitae, ultricies ac, leo. Integer leo pede, ornare a, lacinia eu, vulputate vel, nisl.
              </p>
              
              
              <div class="divider"></div>
              
              
              <h3 class="underline">Lists</h3>
              
              <div class="one-third">
                <h4>Unordered</h4>
                <ul>
                  <li>Cras ornare tristique elit</li>
                  <li>Morbi interdum mollis</li>
                  <li>Vestibulum auctor neque</li>
                </ul>
                
                <h4>Ordered</h4>
                <ol>
                  <li>Cras ornare tristique elit</li>
                  <li>Morbi interdum mollis</li>
                  <li>Vestibulum auctor neque</li>
                </ol>
              </div>
              <!-- END .one-third -->
              
              <div class="one-third">
                <h4>Checklist</h4>
                <ul class="check">
                  <li>Cras ornare tristique elit</li>
                  <li>Morbi interdum mollis</li>
                  <li>Vestibulum auctor neque</li>
                </ul>
                
                <h4>Crosslist</h4>
                <ul class="cross">
                  <li>Cras ornare tristique elit</li>
                  <li>Morbi interdum mollis</li>
                  <li>Vestibulum auctor neque</li>
                </ul>
              </div>
              <!-- END .two-third -->
              
              <div class="one-third last">
                
                <h4>Mixed List</h4>
                <ul class="mixed">
                  <li class="check">Cras ornare tristique elit</li>
                  <li class="cross">Morbi interdum mollis</li>
                  <li class="check">Vestibulum auctor neque</li>
                </ul>
              </div>
              <!-- END .two-third -->
              
              
              <div class="divider"></div>
              
              
              <h3>Data Table</h3>
          
          		<table class="data" summary="Lorem ipsum dolor" cellspacing="0">
          		  <caption>Table 1: Lorem ipsum dolor</caption>
                <thead>
                  <tr>
                    <th class="nobg" scope="col">Porttitor:</th>
                    <th scope="col">Quisque</th>
                    <th scope="col">Volutpat</th>
                    <th scope="col">Interdum</th>
                  </tr>
                </thead> 
                <tfoot>
                  <tr>
                    <th scope="row">Mollis</th>
                    <td>4 Million</td>
                    <td>2 Million</td>
                    <td>1 Million</td>
                  </tr>
                </tfoot>
                <tbody>
                  <tr>
                    <th scope="row">Dapibus</th>
                    <td>Quisque volutpat</td>
                    <td>Morbi est est</td>
                    <td>Donec consectetuer</td>
                  </tr>
                  
                  <tr class="alt">
                    <th scope="row">Viverra</th>
                    <td>Vulputate magna</td>
                    <td>Ligula</td>
                    <td>Ultrices</td>
                  </tr>
                  <tr>
                    <th scope="row">Cursus</th>
                    <td>Quisque volutpat - Aliquam quam (Quisque volutpat)</td>
                    <td>Morbi est est - Aliquam quam (Mollis volutpat)</td>
                    <td>Donec consectetuer - Aliquam quam (Interdum)</td>
                  </tr>
                  <tr class="alt">
                    <th scope="row">Quam placerat</th>
                    <td>Yes</td>
                    <td>No</td>
                    <td>No</td>
                  </tr>
                </tbody>
              </table>
          
          		<table class="data" summary="Lorem ipsum dolor" cellspacing="0">
                <caption>Table 2: Lorem ipsum dolor consectetuer</caption>
                <thead>
                  <tr>
                    <th scope="col">Porttitor:</th>
                    <th scope="col">Quisque</th>
                    <th scope="col">Volutpat</th>
                    <th scope="col">Interdum</th>
                  </tr>
                </thead>  
                <tfoot>
                  <tr>
                    <td>4 Million</td>
                    <td class="alt">2 Million</td>
                    <td>1 Million</td>
                    <td class="alt">4 Million</td>
                  </tr>
                </tfoot>
                <tbody>
                  <tr>
                    <td>Dapibus</td>
                    <td class="alt">Quisque volutpat</td>
                    <td>Morbi est est</td>
                    <td class="alt">Donec consectetuer</td>
                  </tr>
                  <tr>
                    <td>Viverra</td>
                    <td class="alt">Vulputate magna</td>
                    <td>Ligula</td>
                    <td class="alt">Ultrices</td>
                  </tr>
                  <tr>
                    <td>Quisque volutpat - Aliquam quam</td>
                    <td class="alt">Morbi est est - Aliquam quam</td>
                    <td>Donec consectetuer - Aliquam quam</td>
                    <td class="alt">Quisque volutpat - Aliquam quam</td>
                  </tr>
                  <tr>
                    <td>Yes</td>
                    <td class="alt">No</td>
                    <td>No</td>
                    <td class="alt">Yes</td>
                  </tr>
                </tbody>
              </table>
              
              
              
              
              <h3>Buttons</h3>
              <p>
                <a href="#" class="button">Link styled as a button</a>
                <input type="submit" class="submit" value="Input Submit" />
                <button>Button-Tag</button>
              </p>
              
              
              <div class="spacer"></div>
              
              
              <h2>This is an example heading H2</h2>
              <p>
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh.
              </p>
              
              <h3>This is an example heading H3</h3>
              <p>
                Morbi interdum mollis sapien. Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus.
              </p>
              
              <h4>This is an example heading H4</h4>
              <p>
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh.
              </p>
              
              <h5>This is an example heading H5</h5>
              <p>
                Morbi interdum mollis sapien. Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus.
              </p>
              
              <h6>This is an example heading H6</h6>
              <p>
                Morbi interdum mollis sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus.
              </p>
              
              
              
              
              <h3 class="underline">HTML Inline Elements</h3>
              
              <p class="one-third">
                <a href="#">the a element</a> <br/>
                <abbr title="test">the abbr element</abbr> <br/>
                <cite>the cite element</cite> <br/>
                <del>the del element</del> <br/>
                <dfn>the dfn element</dfn> <br/>
              </p>
              <p class="one-third">
                <em>the em element</em> <br/>
                <ins>the ins element</ins> <br/>
                <q>the q element</q> <br/>
                <span>the span element</span> <br/>
                <strong>the strong element</strong> <br/>
              </p>
              <p class="one-third last">
                <var>the var element</var> <br/>
                <code>the code element</code><br/>
                <kbd>the kbd element</kbd> <br/>
                <tt>the tt element</tt> <br/>
                <sub>the sub element</sub> <br/>
                <sup>the sup element</sup> <br/>
              </p>
              
              
              <div class="divider"></div>
              
              
              <address>
                Address: Ruven Pelka, Germany
              </address>
              
              <br />
              
              <pre><strong>Preformated:</strong>Testing one row
                   and another</pre>
                   
               <p>
                 When I visited W<sup>3</sup>C I stopped by the H<sub>2</sub>O fountain.
               </p>
                   
              <dl>
                <dt>Description list title 01</dt>
                <dd>Description list description 01</dd>
                <dt>Description list title 02</dt>
                <dd>Description list description 02</dd>
                <dd>Description list description 03</dd>
              </dl>
              
          		<p>
          		  Lorem <sup>superscript</sup> dolor <sub>subscript</sub> amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. <cite>cite</cite>. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. <acronym title="National Basketball Association">NBA</acronym> Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.  <abbr title="Avenue">AVE</abbr>
          		</p>
              
              <h3>Some Code:</h3>
<code class="block">&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"&gt;
  &lt;head&gt;
    &lt;title&gt;HTML-Elemente für logische Auszeichnung im Text&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;h1&gt;Alles logisch&lt;/h1&gt;
    &lt;p&gt;
      Die Kreter sagen, dass &lt;strong&gt;alle Kreter lügen&lt;/strong&gt;.
      Das stimmt aber nicht, weil alle Kreter lügen.
    &lt;/p&gt;
  &lt;/body&gt;
&lt;/html&gt;
</code>
              
              
                
            </div>
            <!-- END .entry -->
          </div>
          <!-- END #content -->
          
          
          
          
          
          
          <div id="sidebar">
            <div class="box">
              <h3>Recent Posts</h3>
              <div class="nav">
                <ul>
                  <li><a href="post.html">Nam convallis pellentesque nisl</a></li>
                  <li><a href="post.html">Cras iaculis ultricies nulla</a></li>
                  <li><a href="post.html">Praesent placerat</a></li>
                  <li><a href="post.html">Cras ornare tristique elit</a></li>
                  <li><a href="post.html">Nunc dignissim metus</a></li>
                  <li><a href="post.html">Aliquam tincidunt mauris eu</a></li>
                  <li><a href="post.html">Ut aliquam sollicitudin leo</a></li>
                  <li><a href="post.html">Nam convallis pellentesque nisl</a></li>
                  <li><a href="post.html">Cras iaculis ultricies nulla</a></li>
                </ul>
              </div>
            </div>
            <!-- END .box -->
            
            <div class="box">
              <h3>Some Text</h3>
              <div class="content">
                <h5>Unlimited Layout Variations</h5>
                <p>
                  Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
                </p>
                <div class="hr"></div>
                <h5>Sleek Design</h5>
                <p>
                  Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
                </p>
              </div>
            </div>
            <!-- END .box -->
            
            <div class="box">
              <h3>Layout Examples</h3>
              <div class="nav">
                <ul>
                  <li><a href="?example-style=black-box">Black Box</a></li>
                  <li><a href="?example-style=dark-grey">Dark Grey</a></li>
                  <li><a href="?example-style=super-simple">Super Simple</a></li>
                  <li><a href="?color=default_blue">Light Blue</a></li>
                  <li><a href="?sidebar-left=true">Sidebar Left</a></li>
                </ul>
              </div>
            </div>
            <!-- END .box -->
            
            <div class="box">
              <h3>Latest Work</h3>
              <div class="nav">
                <ul>
                  <li><a href="page.html">Fusce pellentesque suscipit nibh</a></li>
                  <li><a href="page.html">Integer vitae libero</a></li>
                  <li><a href="page.html">Risus egestas placerat</a></li>
                  <li><a href="page.html">Vivamus molestie gravida turpis</a></li>
                  <li><a href="page.html">Nulla nec ante</a></li>
                  <li><a href="page.html">Tincidunt mauris eu risus</a></li>
                  <li><a href="page.html">Consectetuer adipiscing elit</a></li>
                </ul>
              </div>
            </div>
            <!-- END .box -->
            
          </div>
          <!-- END #sidebar -->
          
          
          
          
          
        </div>
        <!-- END .wrapper -->
      </div>
      <!-- END #main -->
      
      <div id="bottombar">
        <div class="wrapper">
          <p class="primary">
            This is an HTML-Template by Ruven Pelka. You can purchase it at <a href="http://mojo-themes.com/">mojo-themes.com</a>.
          </p>
          <p class="breadcrumbs secondary">
            <span class="info">Here you are:</span>
            <a href="#">Start</a>
            <span> » </span>
            <a href="#">Blog</a>
            <span> » </span>
            <a href="#" class="active">Quisque volutpat mattis</a>
          </p>
        </div>
      </div>
      <!-- END #bottombar -->
      
      <div id="footer">
        <div class="wrapper">
          <div class="boxes">
            
            
            <div class="contact box">
              <h4>Get in touch with us</h4>
              <p class="vcard">
                <strong class="org">Digitalis Inc.</strong>
                <span class="adr">
                  <br/><span class="street-address">2 Infinite Loop, Suite 123 (Right Floor)</span>
                  <br/><span class="postal-code">Cupertino, CA 95014</span>
                </span>
                <br/><span class="tel">Tel: (408) 996-1011</span>
                <br/><span class="note">Fax: (408) 996-1012</span>
              </p>
              <p>
                <a href="contact.php" class="button">Contact Form »</a>
              </p>
            </div>
            <!-- END .box -->
            
            <div class="box nav">
              <h4>Latest News</h4>
              <ul>
                <li><a href="post.php">Dolor sit Amet</a></li>
                <li><a href="post.php">Quisque volutpat mattis</a></li>
                <li><a href="post.php">Nullam malesuada erat</a></li>
                <li><a href="post.php">Semper Suscipit</a></li>
                <li><a href="post.php">Consectetuer adipiscing elit</a></li>
              </ul>
            </div>
            <!-- END .box -->
            
            <div class="box nav">
              <h4>Latest Work</h4>
              <ul>
                <li><a href="page.php">Vestibulum Auctor</a></li>
                <li><a href="page.php">Nunc Dignissim</a></li>
                <li><a href="page.php">Risus Metus</a></li>
                <li><a href="page.php">Ornare Tristique</a></li>
                <li><a href="page.php">Crasono</a></li>
              </ul>
            </div>
            <!-- END .box -->
            
            <div class="box nav last">
              <h4>Blogroll</h4>
              <ul>
                <li><a href="#">WordPress Blog</a></li>
                <li><a href="#">WordPress Planet</a></li>
                <li><a href="#">Support Forum</a></li>
                <li><a href="#">Plugins</a></li>
                <li><a href="#">Suggest Ideas</a></li>
              </ul>
            </div>
            <!-- END .box -->
          </div>
          <!-- END .boxes -->
        </div>
        <!-- END .wrapper -->
      </div>
      <!-- END #footer -->
      
      <div id="footerbar">
        <div class="wrapper">
          <ul class="social-links primary">
            <li><a href="#"><img src="images/shared/social_icons/rss.png" alt="RSS" width="16" height="16" /></a></li>
            <li><a href="#"><img src="images/shared/social_icons/facebook.png" alt="Facebook" width="16" height="16" /></a></li>
            <li><a href="#"><img src="images/shared/social_icons/twitter.png" alt="Twitter" width="16" height="16" /></a></li>
            <li><a href="#"><img src="images/shared/social_icons/flickr.png" alt="Flickr" width="16" height="16" /></a></li>
            <li><a href="#"><img src="images/shared/social_icons/linkedin.png" alt="LinkedIn" width="16" height="16" /></a></li>
          </ul>
          <p class="copyright secondary">
            This is an HTML-Template by Ruven Pelka. You can purchase it at <a href="http://mojo-themes.com/">mojo-themes.com</a>.
          </p>
        </div>
        <!-- END .wrapper -->
      </div>
      <!-- END .footerbar -->
    </div>
    <!-- END #body-wrapper -->
    
  </body>
</html>